<template>
  <div style="padding:  0 10px">
    <avue-crud :data="data" :option="option" :span-method="spanMethod">
      <template slot="creativeUrl" slot-scope="{ row }">
        <div class="cell">
          <span v-if="row.creativeUrl === '-2'">上传失败</span>
          <span v-if="row.creativeUrl === '-1'">上传中</span>
          <div v-if="row.creativeUrl !== '-1' && row.creativeUrl !== '-2'">
            <el-image
              style="
                max-width: 100%;
                width: auto;
                max-height: 200px;
                height: auto;
              "
              :src="
                row.creativeUrl
              "
              alt=""
            />
          </div>
        </div>
      </template>
      <template slot="tagsSnapshot" slot-scope="{ row }">
        <div style="display: flex;align-items: center;flex-wrap: wrap;">
          <div v-for="(item,index) in modelTagsSnapshot.tagsSnapshot" :key="index" style="margin-right: 10px" v-if="row.$index == 0">
            <el-tag type="info" v-if="item.type === 'system'">{{ item.name }}</el-tag>
            <el-select id="id-offer-componets-creativetags-changeTagsName"
                       size="mini" v-if="item.type !== 'system' && item.tags != null" multiple clearable filterable v-model="item.choose" style="margin-bottom: 5px"
                       @change="changeTagsName(row)">
              <el-option-group
                v-if="getObjectCount(item.tags,'flag',1) > 0"
                :key="0"
                style="color: green;"
                label="生成命名标签">
                <el-option v-for="(it) in item.tags" :key="it.name" :value="it.name" v-if="it.flag == 1" :label="it.name">
                </el-option>
              </el-option-group>
              <el-option-group
                v-if="getObjectCount(item.tags,'flag',0) > 0"
                :key="1"
                style="color: green;"
                label="不生成命名标签">
                <el-option v-for="(it) in item.tags" :key="it.name" :value="it.name" v-if="it.flag == 0" :label="it.name">
                </el-option>
              </el-option-group>
            </el-select>
          </div>
        </div>
      </template>
    </avue-crud>
    <div style="display: flex;justify-content: center">
      <el-button id="id-offer-componets-creativetags-save"  @click="save">保存</el-button>
      <el-button id="id-offer-componets-creativetags-getBack"  @click="getBack">返回</el-button>
    </div>
  </div>
</template>

<script>
import {addCreativeTags} from "@/api/offer/creative"
import {findObject, deepClone} from '@/util/util';
export default {
  props: {
    creativeTagsData: Array,
    creativeTagsSnapshot: Object,
    tagsGetBack: Function
  },
  name: "creativeTags",
  data() {
    return {
      data: [],
      option: {
        addBtn: false,
        menu: false,
        index: true,
        column: [
          {
            label: "短Id",
            prop: "shortId",
            fixed: true,
            width: 80,
          },
          {
            label: "本地文件名",
            prop: "localFilename",
            fixed: true,
            width: 200,
          },
          {
            label: "素材",
            prop: "creativeUrl",
            width: 150,
          },
          {
            label: "素材名",
            prop: "name",
            width: 150,
          },
          {
            label: '标签',
            prop: "tagsSnapshot",
          }
        ]
      },
      modelTagsSnapshot: {
        tagsSnapshot: [
          {
            choose: [],
          }
        ]
      },
    }
  },
  created() {
    let list = [];
    let modelTagsSnapshot = deepClone(this.creativeTagsSnapshot);
    //获取offer下的标签
    modelTagsSnapshot.tagsSnapshot.map(item => {
      if (item.type !== 'system') {
        item.choose = []
      }
    })
    this.modelTagsSnapshot = modelTagsSnapshot;
    this.creativeTagsData.map(item => {
      //回显已被选中的标签
      this.getBackTags(item)
      list.push({
        shortId: item.shortId,
        offerId: item.offerId,
        localFilename: item.localFilename,
        creativeUrl: item.thumbnailUrl,
        createTime: item.createTime,
        name: this.tagsName(item),
        type: item.type,
      });
    })
    this.data = list
  },
  methods: {
    getBackTags(v) {
      if (v.tags !== '') {
        v.tags.split(',').map(item => {
          this.modelTagsSnapshot.tagsSnapshot.map(it => {
            if (it.type !== 'system') {
              if (it.tags.findIndex(i => i.name === item) >= 0) {
                it['choose'].push(it.tags[it.tags.findIndex(i => i.name === item)].name)
                it.choose = Array.from(new Set(it.choose))
              }
            }
          })
        })

      }
    },
    //合并单元格
    spanMethod({rowIndex, columnIndex}) {
      if (columnIndex === 5) {
        if (rowIndex === 0) {
          return {
            rowspan: this.data.length,
            colspan: 1
          }
        } else {
          return [0, 0]
        }
      }
    },
    changeTagsName(v) {
      this.data.forEach(row => {
        row.name = this.tagsName(row)
      })
    },
    getObjectCount(list,propName,propVal) {
      let objCount = 0;
      if(list != null) {
        list.forEach(ele=>{
          if(ele != null) {
            if(ele[propName] == propVal) {
              objCount ++;
            }
          }
        });
      }
      return objCount;
    },
    tagsName(v) {
      let name = []
      console.log(this.modelTagsSnapshot)
      this.modelTagsSnapshot.tagsSnapshot.forEach(item => {
        if (item.type === 'system') {
          if (item.code === 'creativeNum') {
            let type = (v.type === 0 ? 'J' : 'V') + '2' + 'XXX'
            name.push(type)
          }
          if (item.code === 'shortId') {
            let shortId = v.shortId;
            if (shortId !== '') name.push(shortId)
          }
          if (item.code === 'uploadDate') {
            let time = v.createTime.split(' ')[0].split('-').join('');
            if (time !== '') name.push(time)
          }
        } else if (item.choose != null) {
          let tags = [];
          item.choose.forEach(s => {
            if(item.tags != null) {
              let theTag = findObject(item.tags,s,'name');
              if(theTag != null && theTag.flag == 1) {
                tags.push(s)
              }
            }
          })
          if (tags.length > 0) name.push(tags.join(this.modelTagsSnapshot.tagDiv))
        }
      })
      return name.join(this.modelTagsSnapshot.groupDiv)
    },
    save() {
      let ids = [];
      let offerId = '';
      let [...tagsSnapshot] = this.modelTagsSnapshot.tagsSnapshot;
      let list = []
      tagsSnapshot.map(item => {
        if (item.type !== 'system' && item.choose.length !== 0) {
          let value = []
          item.choose.map(i => {
            value.push(item.tags[item.tags.findIndex(it => i === it.name)])
          })
          let data = {
            name: item.name,
            tagType: item.tagType,
            type: item.type,
            tags: value
          }
          list.push(data)
        } else if (item.type === 'system') {
          list.push(item)
        }
      })
      this.creativeTagsData.map(item => {
        offerId = item.offerId
        ids.push(item.id)
      })
      let data = {
        ids: ids.join(','),
        offerId: offerId,
        groupDiv: this.modelTagsSnapshot.groupDiv,
        tagDiv: this.modelTagsSnapshot.tagDiv,
        tagsSnapshot: JSON.stringify(list),
      };

      addCreativeTags(data).then(res => {
        if (res.data.code === 200) {
          this.getBack()
        }
      })
    },
    getBack() {
      this.tagsGetBack()
    }
  }
}
</script>
<style scoped>
/deep/.el-select-group__title {
  background: lightgray;
}
</style>

’
